<template>
	<view class="page">
		<view class="message" >
			<!-- itab -->
			<view class="message-tabs">
				<i-tabs v-model="current"  @change="tabChange">
					<i-tab  item-key="0" title="待审核"></i-tab>
					<i-tab  item-key="1" title="已审核"></i-tab>
					<i-tab  item-key="2" title="已驳回"></i-tab>
				</i-tabs>
			</view>
		</view>
		<scroll-view class="message-content" :scroll-y="true" @scrolltolower="onScrolltolower">
			<view>
				<view class="message-card" @click="toDesc(item)" :key="index" v-for="(item, index) in list">
					<view class="message-card-topRight">
						{{getState(item.authenticationState)}}
					</view>
					<view class="message-card-right">
						<view class="message-card-right-arrow"></view>
						<view class="message-card-right-title">
							<view class="message-card-right-title-left">
								姓名:
							</view>
							<view class="message-card-right-title-right" style="flex:2">
								{{item.authentication.nickName}}
							</view>
						</view>
						<view class="message-card-right-title">
							<view class="message-card-right-title-left">
								手机号:
							</view>
							<view class="message-card-right-title-right" style="flex:2">
								{{item.authentication.mobile}}
							</view>
						</view>
						
					   <view class="message-card-right-btns">
							<view class="message-card-right-btns-reject"><view class="message-card-right-btns-reject-btn">查看详情</view></view>
							<view class="message-card-right-btns-reject" v-if="item.authenticationState=='1'" @click.stop="toDesc(item)"><view class="message-card-right-btns-reject-btn">去审核</view></view>
							
						</view>
					</view>
				</view>
				<text  class="uni-load-more__text">没有更多了</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {getDistances,dateUtils} from '../../common/utils.js'
	import iTabs from '@/components/iview/tabs/index'
	import iTab from '@/components/iview/tab/index'
	import {mapGetters} from 'vuex'
	export default {
		computed: {
			...mapGetters({
				userInfo: 'userInfo'
		   })
		},
	    components: {
			iTabs,
			iTab
		},
		data() {
			return {
				current: '1',
				list:[]
			}
		},
		onShow() {
			this.initPage()
			this.searchInfo()
     	},
		methods: {
			getState(state){
				switch(state){
					case 1: 
					return "待审核"
					break;
					case 2:
					return "已审核"
					break;
					case 3:
					return "已驳回"
					break;
				}
			},
			toDesc(data){
				uni.navigateTo({
					url:'examine-desc?id='+data._id
				})
			},
			tabChange() {
				this.list = []
				this.searchInfo()
			},
			searchInfo() {
				uni.showLoading();
				this.$api('user-center','getUserList', {authenticationState:(this.current*1)+1}).then(res=>{
					this.list=[];
					if (res) {
						console.log(res.data)
						this.list = res.data;
						uni.hideLoading();
					}
				})
			},
			initPage() {
				this.list = [];
				this.page=0;
				this.row=20;
			},
			onScrolltolower() {
				if (!this.isMore) return;
				this.searchInfo()
			},
			openModal(item){
				this.showModal=true;
				this.orderGoodsInfo=item;
			},
			//客户撤回
			reback(){
				uni.showModal({
					title: '撤回订单',
					content: '请联系17603844084后台管理人员帮你撤回',
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						}
					}
				})
			},
			// 确认到达
			agree(item) {
				let distances=getDistances(this.latitude,this.longitude,item.addressInfo.latitude,
				item.addressInfo.longitude)
				console.log(distances)
				if(distances.distance>=0.5){
					uni.showModal({
						title:'提示',
						content:'距离定位'+distances.distance_str+',已经超过500米确认到达么？',
						success:(re)=> {
							if(re.confirm){
								this.sendMsg(item)
								this.$api("recovery-order","upd",{state:2,_id:item._id}).then(res=>{
									this.searchInfo()
									this.$msg("已提示用户已到达！")
								})
							}
						}
					})
				}else{
					this.sendMsg(item)
					this.$api("recovery-order","upd",{state:2,_id:item._id}).then(res=>{
						this.searchInfo()
						this.$msg("已提示用户已到达！")
					})
				}
			},
			async sendMsg(item){
				console.log(this.userInfo)
				let openid=await this.$api('user-center','getUserOpenIdById',{_id:item.user_id})
				let {result} = await this.$api('sendSubscribeMessage','subscribeMessage',{
					openid:openid,
					template_id:'aPItP2S5Ia6W5CqHD_CO2UK7A8XX2zGnHrJR9yuzKNc',
					page:'pages/order/order',
					subscribeData:{
						thing15:{value:this.userInfo.nickName},
						phone_number16:{value:this.userInfo.mobile},
						time2:{value:dateUtils.formatDateZh(new Date())},
						thing3:{value:item.addressDesc},
						thing4:{value:'回收员已经确认到达。。'}
					}
				})
			},
			//员工确认支付
			payOrder(item){
				uni.navigateTo({
					url:'pay-order?id='+item._id+'&orderType='+item.publicGive
				})
			},
			//删除接口
			del(item) {
				let self=this;
				uni.showModal({
					title: '删除订单',
					content: '确定删除订单',
					success: function (res) {
						if (res.confirm) {
							deleteOrderById(item.id).then(res=>{
								if(res.returnCode=="0"){
									self.initPage()
									self.searchInfo()
								}
							})
						}else if (res.cancel) {
							console.log('用户点击确定');
						}
					}
				})
				
				
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import '@/components/iview/mixin.scss';
	.page {
		height: 100%;
		.uni-load-more__text {
			font-size: 28rpx;
		    width: 100%;
		    display: block;
		    padding: 20px 0px;
		    text-align: center;
		    color: #999;
		}
		.message {
			width: 100%;
			box-shadow: 0px 2upx 16upx 0px rgba(0, 0, 0, 0.06);
			position: fixed;
			top: 0px;
			background-color: #FFFFFF;
			&-title {

				padding-left: 30upx;
				padding-right: 30upx;

				&-span {
					height: 70upx;
					font-size: 50upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: rgba(34, 34, 34, 1);
					line-height: 70upx;
				}
			}
			&-tab {
				padding-left: 30upx;
				padding-right: 30upx;
				display: flex;
				&-item {
					&-badge {}
				}
			}
		}
		.message-tabs{
			background-color: #FFFFFF;
		}
		.message-content {
			margin-top: 75rpx;
			height:calc(100% - 280rpx);
			overflow-y: scroll;
			.message-card {
				display: flex;
				margin: 30upx 30upx 0;
				position: relative;
				width: calc(100% - 30px);
				&-topRight{
					position: absolute;
					right:20upx;
					top:30upx;
					width: 130upx;
					background: #31b977;
					color: #FFFFFF;
					height: 36upx;
					line-height: 36upx;
					font-size: 26upx;
					text-align: center;
					border-radius: 12upx;
				}

				&-left {
					width: 70upx;
					height: 70upx;
					font-size: 32upx;
					display: inline-block;
					text-align: center;
					line-height: 70upx;
					border-radius: 50%;
					color: white;
					background: rgba(74, 134, 236, 1);
				}

				&-right {
					flex: 1;
					position: relative;
					padding: 22upx 22upx;
					border: 2upx solid #E3E7EB;
					border-radius: 12upx;
					width: calc(100% - 30px);
					&-arrow {
						position: absolute;
						width: 18upx;
						height: 39upx;
						left: -18upx;
						top: 60upx;
						z-index: 111;
						background-size: 100% 100%;
						
					}
					&-content {
						font-size: 30upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(34, 34, 34, 1);
						line-height: 42upx;
						display: flex;
						text-align: center;
						padding: 14upx 10upx 0px;
						&-item{
							flex:1;
						}
					}

					&-btns {
						display: flex;
						position: relative;
						margin-top: 20upx;
						font-size: 32upx;
						font-weight: 400;
						color: rgba(34, 34, 34, 1);
						line-height: 60upx;
						padding-top: 15upx;
						padding-left: 20upx;
						padding-right: 20upx;
						&:after {
							@include hairline();
							border-top-width: 1px;
						}

						&-divider {
							width: 1upx;
							background: #E3E7EB;
							height: 48upx;
						}

						&-reject {
							flex: 1;
							display: flex;
							justify-content:center;
							&-btn{
								width: 90%;
								background: #31b977;
								border-radius: 10upx;
								color: #FFFFFF;
								text-align: center;
							}
							
						}
						
						&-agree {
							flex: 1;
							display: flex;
							justify-content:center;
							&-btn{
								width: 90%;
								background: #31b977;
								border-radius: 10upx;
								color: #FFFFFF;
								text-align: center;
							}
						}
					}

					&-info {
						font-size: 28upx;
						font-weight: 400;
						color: rgba(153, 153, 153, 1);
						line-height: 40upx;

						&-time {
							display: inline-block;
							font-size: 28upx;
							font-weight: 400;
							color: rgba(34, 34, 34, 1);
						}
					}

					&-title {
						display: flex;

						// justify-content: space-between;
						align-items: center;

						&-left {
							font-size: 34upx;
							font-weight: 400;
							color: #222222;
							flex: 1;

							span {
								color: #4A86EC;
							}
						}

						&-right {
							font-size: 32upx;
							font-weight: 400;
							color: rgba(153, 153, 153, 1);
						}
					}
				}
			}
		}

	}
</style>
